<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid布局教学演示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .intro {
            max-width: 800px;
            margin: 0 auto;
            color: #7f8c8d;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 500px 1fr;
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
            height: calc(100vh - 200px);
        }
        
        @media (max-width: 1000px) {
            .main-content {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
            }
        }
        
        .controls-panel {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }
        
        .demo-section {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .demo-container {
            flex: 1;
            border: 2px solid #3498db;
            border-radius: 5px;
            margin: 20px 0;
            /* padding: 15px; */
            background: #ecf0f1;
            overflow: auto;
            display: grid;
            gap: 10px;
            position: relative;
        }
        
        .grid-lines {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            display: grid;
            grid-template-columns: inherit;
            grid-template-rows: inherit;
            gap: inherit;
            z-index: 1;
        }
        
        .grid-line {
            background: rgba(52, 152, 219, 0.1);
            border: 1px dashed rgba(52, 152, 219, 0.3);
        }
        
        .demo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 5px;
            /* transition: all 0.3s ease; */
            /* min-height: 60px; */
            z-index: 2;
            padding: 10px;
        }
        
        .item-1 { background: #3498db; }
        .item-2 { background: #2ecc71; }
        .item-3 { background: #e74c3c; }
        .item-4 { background: #f39c12; }
        .item-5 { background: #9b59b6; }
        .item-6 { background: #1abc9c; }
        .item-7 { background: #d35400; }
        .item-8 { background: #27ae60; }
        .item-9 { background: #8e44ad; }
        
        .control-group {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .control-group:last-child {
            border-bottom: none;
        }
        
        .control-group h3 {
            margin-bottom: 12px;
            color: #2c3e50;
            font-size: 1.1em;
            display: flex;
            align-items: center;
        }
        
        .control-group h3::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #eee;
            margin-left: 10px;
        }
        
        .btn {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            background: #3498db;
            color: white;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            margin: 0 5px 8px 0;
            font-size: 0.9em;
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .btn-active {
            background: #16a085;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        }
        
        .input-group {
            margin-bottom: 10px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #2c3e50;
            font-size: 0.9em;
        }
        
        .input-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9em;
        }
        
        .slider-container {
            margin-bottom: 15px;
        }
        
        .slider-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #2c3e50;
            font-size: 0.9em;
        }
        
        .slider {
            width: 100%;
            margin: 5px 0;
        }
        
        .code-container {
            background: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
            overflow: auto;
            margin: 20px 0;
            font-size: 0.9em;
            max-height: 200px;
        }
        
        .code-container pre {
            margin: 0;
        }
        
        .property {
            color: #3498db;
        }
        
        .value {
            color: #2ecc71;
        }
        
        .comment {
            color: #95a5a6;
        }
        
        .info-box {
            background: #d1ecf1;
            border-left: 4px solid #0c5460;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            font-size: 0.9em;
        }
        
        .example-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 15px 0;
        }
        
        .example-btn {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #95a5a6;
            color: white;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            text-align: center;
            font-size: 0.9em;
        }
        
        .example-btn:hover {
            background: #7f8c8d;
            transform: translateY(-2px);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            color: #7f8c8d;
        }
        
        .item-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }
        
        .item-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            background: #95a5a6;
            color: white;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            font-size: 0.9em;
        }
        
        .item-btn:hover {
            background: #7f8c8d;
        }
        
        .toggle-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .toggle-btn {
            flex: 1;
            padding: 8px;
            border: 1px solid #3498db;
            border-radius: 5px;
            background: white;
            color: #3498db;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            text-align: center;
        }
        
        .toggle-btn.active {
            background: #3498db;
            color: white;
        }
        
        .grid-area-control {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .area-input {
            display: flex;
            flex-direction: column;
        }
        
        .area-input label {
            font-size: 0.8em;
            margin-bottom: 3px;
            color: #2c3e50;
        }
        
        .area-input input {
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9em;
        }
        
        .highlight {
            background: yellow;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .help-text {
            font-size: 0.8em;
            color: #7f8c8d;
            margin-top: 3px;
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS Grid布局教学演示</h1>
        <p class="intro">这个页面通过交互式演示帮助理解CSS Grid布局模型，Grid是CSS中最强大的二维布局系统。</p>
    </header>
    
    <div class="main-content">
        <div class="controls-panel">
            <h2>Grid属性控制</h2>
            
            <div class="info-box">
                <p>调整以下属性，实时查看Grid布局的变化。所有更改将立即反映在右侧的演示区域。</p>
            </div>
            
            <div class="control-group">
                <h3>网格模板</h3>
                
                <div class="input-group">
                    <label for="templateColumns">grid-template-columns</label>
                    <input type="text" id="templateColumns" value="1fr 1fr 1fr" placeholder="e.g. 1fr 1fr 1fr">
                    <div class="help-text">定义列大小 (fr, px, %, auto, minmax(), repeat())</div>
                </div>
                
                <div class="input-group">
                    <label for="templateRows">grid-template-rows</label>
                    <input type="text" id="templateRows" value="1fr 1fr 1fr" placeholder="e.g. 1fr 1fr 1fr">
                    <div class="help-text">定义行大小 (fr, px, %, auto, minmax(), repeat())</div>
                </div>
                
                <div class="slider-container">
                    <label for="gapSlider">网格间隔 (gap): <span id="gapValue">10px</span></label>
                    <input type="range" id="gapSlider" class="slider" min="0" max="30" value="10" oninput="setGap(this.value)">
                </div>
                
                <div class="toggle-group">
                    <div class="toggle-btn active" onclick="toggleGridLines(true)">显示网格线</div>
                    <div class="toggle-btn" onclick="toggleGridLines(false)">隐藏网格线</div>
                </div>
            </div>
            
            <div class="control-group">
                <h3>对齐方式</h3>
                stretch 拉伸
                <div class="input-group">
                    <label>justify-items (单元格水平对齐)</label>
                    <div>
                        <button class="btn" onclick="setJustifyItems('stretch')">stretch</button>
                        <button class="btn" onclick="setJustifyItems('start')">start</button>
                        <button class="btn" onclick="setJustifyItems('end')">end</button>
                        <button class="btn btn-active" onclick="setJustifyItems('center')">center</button>
                    </div>
                </div>
                
                <div class="input-group">
                    <label>align-items (单元格垂直对齐)</label>
                    <div>
                        <button class="btn" onclick="setAlignItems('stretch')">stretch</button>
                        <button class="btn" onclick="setAlignItems('start')">start</button>
                        <button class="btn" onclick="setAlignItems('end')">end</button>
                        <button class="btn btn-active" onclick="setAlignItems('center')">center</button>
                    </div>
                </div>
                
                <div class="input-group">
                    <label>justify-content (网格水平对齐)</label>
                    <div>
                        <button class="btn btn-active" onclick="setJustifyContent('stretch')">stretch</button>
                        <button class="btn" onclick="setJustifyContent('start')">start</button>
                        <button class="btn" onclick="setJustifyContent('end')">end</button>
                        <button class="btn" onclick="setJustifyContent('center')">center</button>
                        <button class="btn" onclick="setJustifyContent('space-between')">space-between</button>
                        <button class="btn" onclick="setJustifyContent('space-around')">space-around</button>
                        <button class="btn" onclick="setJustifyContent('space-evenly')">space-evenly</button>
                    </div>
                </div>
                
                <div class="input-group">
                    <label>align-content (网格垂直对齐)</label>
                    <div>
                        <button class="btn btn-active" onclick="setAlignContent('stretch')">stretch</button>
                        <button class="btn" onclick="setAlignContent('start')">start</button>
                        <button class="btn" onclick="setAlignContent('end')">end</button>
                        <button class="btn" onclick="setAlignContent('center')">center</button>
                        <button class="btn" onclick="setAlignContent('space-between')">space-between</button>
                        <button class="btn" onclick="setAlignContent('space-around')">space-around</button>
                        <button class="btn" onclick="setAlignContent('space-evenly')">space-evenly</button>
                    </div>
                </div>
            </div>
            
            <div class="control-group">
                <h3>自动布局</h3>
                
                <div class="input-group">
                    <label>grid-auto-flow</label>
                    <div>
                        <button class="btn btn-active" onclick="setAutoFlow('row')">row</button>
                        <button class="btn" onclick="setAutoFlow('column')">column</button>
                        <button class="btn" onclick="setAutoFlow('dense')">dense</button>
                    </div>
                </div>
                
                <div class="input-group">
                    <label for="autoColumns">grid-auto-columns</label>
                    <input type="text" id="autoColumns" value="auto" placeholder="e.g. auto">
                    <div class="help-text">隐式创建的列的大小</div>
                </div>
                
                <div class="input-group">
                    <label for="autoRows">grid-auto-rows</label>
                    <input type="text" id="autoRows" value="auto" placeholder="e.g. auto">
                    <div class="help-text">隐式创建的行的大小</div>
                </div>
            </div>
            
            <div class="control-group">
                <h3>项目控制</h3>
                
                <div class="item-controls">
                    <button class="item-btn" onclick="addItem()">添加项目</button>
                    <button class="item-btn" onclick="removeItem()">移除项目</button>
                    <button class="item-btn" onclick="resetItems()">重置项目</button>
                </div>
                
                <!-- <div class="input-group">
                    <label>选中项目: <span id="selectedItem">无</span></label>
                    <div class="grid-area-control">
                        <div class="area-input">
                            <label for="gridColumnStart">grid-column-start</label>
                            <input type="text" id="gridColumnStart" placeholder="e.g. 1">
                        </div>
                        <div class="area-input">
                            <label for="gridColumnEnd">grid-column-end</label>
                            <input type="text" id="gridColumnEnd" placeholder="e.g. 3">
                        </div>
                        <div class="area-input">
                            <label for="gridRowStart">grid-row-start</label>
                            <input type="text" id="gridRowStart" placeholder="e.g. 1">
                        </div>
                        <div class="area-input">
                            <label for="gridRowEnd">grid-row-end</label>
                            <input type="text" id="gridRowEnd" placeholder="e.g. 3">
                        </div>
                    </div>
                    <button class="btn" onclick="applyItemPosition()">应用位置</button>
                </div> -->
            </div>
            
            <div class="control-group">
                <h3>布局模板</h3>
                
                <div class="example-grid">
                    <button class="example-btn" onclick="applyExample('basicGrid')">基础网格</button>
                    <button class="example-btn" onclick="applyExample('headerMainFooter')">页头-主体-页脚</button>
                    <button class="example-btn" onclick="applyExample('sidebarLayout')">侧边栏布局</button>
                    <button class="example-btn" onclick="applyExample('magazine')">杂志布局</button>
                    <button class="example-btn" onclick="applyExample('photoGallery')">照片墙</button>
                    <button class="example-btn" onclick="applyExample('dashboard')">仪表板</button>
                </div>
                
                <button class="btn" style="width: 100%;" onclick="resetDemo()">重置所有设置</button>
            </div>
        </div>
        
        <div class="demo-section">
            <h2>Grid布局演示</h2>
            
            <div class="demo-container" id="demoContainer">
                <div class="grid-lines" id="gridLines"></div>
                
                <div class="demo-item item-1" onclick="selectItem(this)">项目 1</div>
                <div class="demo-item item-2" onclick="selectItem(this)">项目 2</div>
                <div class="demo-item item-3" onclick="selectItem(this)">项目 3</div>
                <div class="demo-item item-4" onclick="selectItem(this)">项目 4</div>
                <div class="demo-item item-5" onclick="selectItem(this)">项目 5</div>
                <div class="demo-item item-6" onclick="selectItem(this)">项目 6</div>
                <div class="demo-item item-7" onclick="selectItem(this)">项目 7</div>
                <div class="demo-item item-8" onclick="selectItem(this)">项目 8</div>
                <div class="demo-item item-9" onclick="selectItem(this)">项目 9</div>
            </div>
            
            <div class="code-container">
                <pre id="cssCode">.grid-container {
  <span class="property">display</span>: <span class="value">grid</span>;
  <span class="property">grid-template-columns</span>: <span class="value">1fr 1fr 1fr</span>;
  <span class="property">grid-template-rows</span>: <span class="value">1fr 1fr 1fr</span>;
  <span class="property">gap</span>: <span class="value">10px</span>;
  <span class="property">justify-items</span>: <span class="value">center</span>;
  <span class="property">align-items</span>: <span class="value">center</span>;
  <span class="property">justify-content</span>: <span class="value">stretch</span>;
  <span class="property">align-content</span>: <span class="value">stretch</span>;
  <span class="property">grid-auto-flow</span>: <span class="value">row</span>;
  <span class="property">grid-auto-columns</span>: <span class="value">auto</span>;
  <span class="property">grid-auto-rows</span>: <span class="value">auto</span>;
}</pre>
            </div>
        </div>
    </div>
    
    <footer>
        <p>[羽神同行]CSS陪跑训练营 &copy; EOVA.CN</p>
    </footer>

    <script>
        // 获取DOM元素
        const demoContainer = document.getElementById('demoContainer');
        const gridLines = document.getElementById('gridLines');
        const cssCode = document.getElementById('cssCode');
        const gapValue = document.getElementById('gapValue');
        const selectedItemText = document.getElementById('selectedItem');
        const templateColumnsInput = document.getElementById('templateColumns');
        const templateRowsInput = document.getElementById('templateRows');
        const autoColumnsInput = document.getElementById('autoColumns');
        const autoRowsInput = document.getElementById('autoRows');
        const gridColumnStartInput = document.getElementById('gridColumnStart');
        const gridColumnEndInput = document.getElementById('gridColumnEnd');
        const gridRowStartInput = document.getElementById('gridRowStart');
        const gridRowEndInput = document.getElementById('gridRowEnd');
        
        let selectedItem = null;
        let itemCount = 9;
        let showGridLines = true;
        
        // 初始化
        window.onload = function() {
            updateGridLines();
            updateCode();
            
            // 添加输入事件监听器
            templateColumnsInput.addEventListener('input', function() {
                demoContainer.style.gridTemplateColumns = this.value;
                updateGridLines();
                updateCode();
            });
            
            templateRowsInput.addEventListener('input', function() {
                demoContainer.style.gridTemplateRows = this.value;
                updateGridLines();
                updateCode();
            });
            
            autoColumnsInput.addEventListener('input', function() {
                demoContainer.style.gridAutoColumns = this.value;
                updateCode();
            });
            
            autoRowsInput.addEventListener('input', function() {
                demoContainer.style.gridAutoRows = this.value;
                updateCode();
            });
        };
        
        // 设置间隔
        function setGap(value) {
            demoContainer.style.gap = value + 'px';
            gapValue.textContent = value + 'px';
            updateGridLines();
            updateCode();
        }
        
        // 设置justify-items
        function setJustifyItems(value) {
            demoContainer.style.justifyItems = value;
            updateCode();
            updateButtonStates('justify-items', value);
        }
        
        // 设置align-items
        function setAlignItems(value) {
            demoContainer.style.alignItems = value;
            updateCode();
            updateButtonStates('align-items', value);
        }
        
        // 设置justify-content
        function setJustifyContent(value) {
            demoContainer.style.justifyContent = value;
            updateCode();
            updateButtonStates('justify-content', value);
        }
        
        // 设置align-content
        function setAlignContent(value) {
            demoContainer.style.alignContent = value;
            updateCode();
            updateButtonStates('align-content', value);
        }
        
        // 设置auto-flow
        function setAutoFlow(value) {
            demoContainer.style.gridAutoFlow = value;
            updateCode();
            updateButtonStates('grid-auto-flow', value);
        }
        
        // 切换网格线显示
        function toggleGridLines(show) {
            showGridLines = show;
            gridLines.style.display = show ? 'grid' : 'none';
            
            const buttons = document.querySelectorAll('.toggle-btn');
            buttons[0].classList.toggle('active', show);
            buttons[1].classList.toggle('active', !show);
        }
        
        // 更新网格线
        function updateGridLines() {
            const columns = demoContainer.style.gridTemplateColumns || '1fr 1fr 1fr';
            const rows = demoContainer.style.gridTemplateRows || '1fr 1fr 1fr';
            const gap = demoContainer.style.gap || '10px';
            
            gridLines.style.gridTemplateColumns = columns;
            gridLines.style.gridTemplateRows = rows;
            gridLines.style.gap = gap;
            
            // 清除现有网格线
            gridLines.innerHTML = '';
            
            // 计算网格单元数量
            const colCount = columns.split(' ').length;
            const rowCount = rows.split(' ').length;
            const cellCount = colCount * rowCount;
            
            // 添加网格线
            for (let i = 0; i < cellCount; i++) {
                const line = document.createElement('div');
                line.className = 'grid-line';
                gridLines.appendChild(line);
            }
        }
        
        // 添加项目
        function addItem() {
            if (itemCount >= 16) return;
            
            itemCount++;
            const newItem = document.createElement('div');
            newItem.className = `demo-item item-${itemCount % 9 || 9}`;
            newItem.textContent = `项目 ${itemCount}`;
            newItem.onclick = function() { selectItem(this); };
            
            demoContainer.appendChild(newItem);
        }
        
        // 移除项目
        function removeItem() {
            if (itemCount <= 1) return;
            
            const items = demoContainer.querySelectorAll('.demo-item');
            if (items.length > 0) {
                demoContainer.removeChild(items[items.length - 1]);
                itemCount--;
                
                // 如果移除了选中的项目，清除选择
                if (selectedItem && !selectedItem.isConnected) {
                    selectedItem = null;
                    selectedItemText.textContent = "无";
                    clearItemInputs();
                }
            }
        }
        
        // 重置项目
        function resetItems() {
            const items = demoContainer.querySelectorAll('.demo-item');
            items.forEach(item => {
                item.style.gridColumn = '';
                item.style.gridRow = '';
            });
            
            updateCode();
        }
        
        // 选择项目
        function selectItem(item) {
            // 清除之前的选择
            if (selectedItem) {
                selectedItem.style.boxShadow = '';
            }
            
            // 设置新选择
            selectedItem = item;
            selectedItem.style.boxShadow = '0 0 0 3px yellow';
            selectedItemText.textContent = item.textContent;
            
            // 获取当前位置
            const columnStart = item.style.gridColumnStart || '';
            const columnEnd = item.style.gridColumnEnd || '';
            const rowStart = item.style.gridRowStart || '';
            const rowEnd = item.style.gridRowEnd || '';
            
            // 更新输入框
            gridColumnStartInput.value = columnStart;
            gridColumnEndInput.value = columnEnd;
            gridRowStartInput.value = rowStart;
            gridRowEndInput.value = rowEnd;
        }
        
        // 应用项目位置
        function applyItemPosition() {
            if (!selectedItem) return;
            
            const columnStart = gridColumnStartInput.value;
            const columnEnd = gridColumnEndInput.value;
            const rowStart = gridRowStartInput.value;
            const rowEnd = gridRowEndInput.value;
            
            if (columnStart) selectedItem.style.gridColumnStart = columnStart;
            if (columnEnd) selectedItem.style.gridColumnEnd = columnEnd;
            if (rowStart) selectedItem.style.gridRowStart = rowStart;
            if (rowEnd) selectedItem.style.gridRowEnd = rowEnd;
            
            updateCode();
        }
        
        // 清除项目输入框
        function clearItemInputs() {
            gridColumnStartInput.value = '';
            gridColumnEndInput.value = '';
            gridRowStartInput.value = '';
            gridRowEndInput.value = '';
        }
        
        // 应用示例布局
        function applyExample(example) {
            switch(example) {
                case 'basicGrid':
                    templateColumnsInput.value = '1fr 1fr 1fr';
                    templateRowsInput.value = '1fr 1fr 1fr';
                    demoContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
                    demoContainer.style.gridTemplateRows = '1fr 1fr 1fr';
                    setJustifyItems('center');
                    setAlignItems('center');
                    break;
                    
                case 'headerMainFooter':
                    templateColumnsInput.value = '1fr';
                    templateRowsInput.value = '80px 1fr 60px';
                    demoContainer.style.gridTemplateColumns = '1fr';
                    demoContainer.style.gridTemplateRows = '80px 1fr 60px';
                    setJustifyItems('stretch');
                    setAlignItems('stretch');
                    
                    // 定位项目
                    const items = demoContainer.querySelectorAll('.demo-item');
                    if (items.length >= 3) {
                        items[0].style.gridArea = '1 / 1 / 2 / 2'; // 页头
                        items[1].style.gridArea = '2 / 1 / 3 / 2'; // 主体
                        items[2].style.gridArea = '3 / 1 / 4 / 2'; // 页脚
                    }
                    break;
                    
                case 'sidebarLayout':
                    templateColumnsInput.value = '250px 1fr';
                    templateRowsInput.value = '60px 1fr 60px';
                    demoContainer.style.gridTemplateColumns = '250px 1fr';
                    demoContainer.style.gridTemplateRows = '60px 1fr 60px';
                    setJustifyItems('stretch');
                    setAlignItems('stretch');
                    
                    // 定位项目
                    const items2 = demoContainer.querySelectorAll('.demo-item');
                    if (items2.length >= 4) {
                        items2[0].style.gridArea = '1 / 1 / 4 / 2'; // 侧边栏
                        items2[1].style.gridArea = '1 / 2 / 2 / 3'; // 页头
                        items2[2].style.gridArea = '2 / 2 / 3 / 3'; // 主体
                        items2[3].style.gridArea = '3 / 2 / 4 / 3'; // 页脚
                    }
                    break;
                    
                case 'magazine':
                    templateColumnsInput.value = '1fr 1fr 1fr';
                    templateRowsInput.value = '200px 200px 200px';
                    demoContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
                    demoContainer.style.gridTemplateRows = '200px 200px 200px';
                    setJustifyItems('stretch');
                    setAlignItems('stretch');
                    
                    // 定位项目
                    const items3 = demoContainer.querySelectorAll('.demo-item');
                    if (items3.length >= 6) {
                        items3[0].style.gridArea = '1 / 1 / 3 / 2'; // 大标题
                        items3[1].style.gridArea = '1 / 2 / 2 / 3'; // 小标题1
                        items3[2].style.gridArea = '1 / 3 / 2 / 4'; // 小标题2
                        items3[3].style.gridArea = '2 / 2 / 3 / 4'; // 中标题
                        items3[4].style.gridArea = '3 / 1 / 4 / 3'; // 底部大标题
                        items3[5].style.gridArea = '3 / 3 / 4 / 4'; // 底部小标题
                    }
                    break;
                    
                case 'photoGallery':
                    templateColumnsInput.value = 'repeat(auto-fill, minmax(150px, 1fr))';
                    templateRowsInput.value = 'repeat(auto-fill, minmax(150px, 1fr))';
                    demoContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(150px, 1fr))';
                    demoContainer.style.gridTemplateRows = 'repeat(auto-fill, minmax(150px, 1fr))';
                    setJustifyItems('stretch');
                    setAlignItems('stretch');
                    break;
                    
                case 'dashboard':
                    templateColumnsInput.value = '1fr 1fr 1fr';
                    templateRowsInput.value = '100px 200px 200px 100px';
                    demoContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
                    demoContainer.style.gridTemplateRows = '100px 200px 200px 100px';
                    setJustifyItems('stretch');
                    setAlignItems('stretch');
                    
                    // 定位项目
                    const items4 = demoContainer.querySelectorAll('.demo-item');
                    if (items4.length >= 8) {
                        items4[0].style.gridArea = '1 / 1 / 2 / 4'; // 顶部导航
                        items4[1].style.gridArea = '2 / 1 / 4 / 2'; // 侧边栏
                        items4[2].style.gridArea = '2 / 2 / 3 / 3'; // 图表1
                        items4[3].style.gridArea = '2 / 3 / 3 / 4'; // 图表2
                        items4[4].style.gridArea = '3 / 2 / 4 / 4'; // 主图表
                        items4[5].style.gridArea = '4 / 1 / 5 / 4'; // 页脚
                    }
                    break;
            }
            
            updateGridLines();
            updateCode();
        }
        
        // 重置演示
        function resetDemo() {
            // 重置容器属性
            demoContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
            demoContainer.style.gridTemplateRows = '1fr 1fr 1fr';
            demoContainer.style.gap = '10px';
            demoContainer.style.justifyItems = 'center';
            demoContainer.style.alignItems = 'center';
            demoContainer.style.justifyContent = 'stretch';
            demoContainer.style.alignContent = 'stretch';
            demoContainer.style.gridAutoFlow = 'row';
            demoContainer.style.gridAutoColumns = 'auto';
            demoContainer.style.gridAutoRows = 'auto';
            
            // 重置输入框
            templateColumnsInput.value = '1fr 1fr 1fr';
            templateRowsInput.value = '1fr 1fr 1fr';
            autoColumnsInput.value = 'auto';
            autoRowsInput.value = 'auto';
            document.getElementById('gapSlider').value = 10;
            gapValue.textContent = '10px';
            
            // 重置项目
            resetItems();
            const items = demoContainer.querySelectorAll('.demo-item');
            items.forEach(item => {
                item.style.boxShadow = '';
            });
            
            // 清除选择
            selectedItem = null;
            selectedItemText.textContent = "无";
            clearItemInputs();
            
            // 重置按钮状态
            updateButtonStates('justify-items', 'center');
            updateButtonStates('align-items', 'center');
            updateButtonStates('justify-content', 'stretch');
            updateButtonStates('align-content', 'stretch');
            updateButtonStates('grid-auto-flow', 'row');
            
            // 显示网格线
            toggleGridLines(true);
            
            updateGridLines();
            updateCode();
        }

        resetDemo();// 初始化重置
        
        // 更新代码显示
        function updateCode() {
            cssCode.innerHTML = `.grid-container {
  <span class="property">display</span>: <span class="value">grid</span>;
  <span class="property">grid-template-columns</span>: <span class="value">${demoContainer.style.gridTemplateColumns || '1fr 1fr 1fr'}</span>;
  <span class="property">grid-template-rows</span>: <span class="value">${demoContainer.style.gridTemplateRows || '1fr 1fr 1fr'}</span>;
  <span class="property">gap</span>: <span class="value">${demoContainer.style.gap || '10px'}</span>;
  <span class="property">justify-items</span>: <span class="value">${demoContainer.style.justifyItems || 'center'}</span>;
  <span class="property">align-items</span>: <span class="value">${demoContainer.style.alignItems || 'center'}</span>;
  <span class="property">justify-content</span>: <span class="value">${demoContainer.style.justifyContent || 'stretch'}</span>;
  <span class="property">align-content</span>: <span class="value">${demoContainer.style.alignContent || 'stretch'}</span>;
  <span class="property">grid-auto-flow</span>: <span class="value">${demoContainer.style.gridAutoFlow || 'row'}</span>;
  <span class="property">grid-auto-columns</span>: <span class="value">${demoContainer.style.gridAutoColumns || 'auto'}</span>;
  <span class="property">grid-auto-rows</span>: <span class="value">${demoContainer.style.gridAutoRows || 'auto'}</span>;
}`;
        }
        
        // 更新按钮状态
        function updateButtonStates(property, value) {
            const buttons = document.querySelectorAll('.btn');
            
            // 重置相关按钮状态
            buttons.forEach(button => {
                if (button.textContent === value && 
                    button.onclick && 
                    button.onclick.toString().includes(property)) {
                    button.classList.add('btn-active');
                } else if (button.onclick && 
                          button.onclick.toString().includes(property)) {
                    button.classList.remove('btn-active');
                }
            });
        }
    </script>
</body>
</html>